<template>
  <section class="login-main">
    <div class="account-number">
      <input
        type="text"
        placeholder="账号"
        @input="handleAccountNumber"
        ref="accountNumber"
      />
    </div>
    <div class="password">
      <input
        type="password"
        placeholder="密码"
        ref="inputPassword"
        @input="handlePassword"
      />
      <div class="switch">
        <div
          class="circle"
          @click="handleMoveCircle"
          :class="{ move: isMove }"
        ></div>
        <div class="frame" :class="{ 'frame-active': isMove }">abc...</div>
      </div>
    </div>
    <div class="verification-code">
      <input
        type="text"
        placeholder="验证码"
        @input="handleVerificationCode"
        ref="verificationCode"
      />
      <img :src="captchaAddress" alt="" />
      <div class="tips">
        <span class="unclear">看不清</span>
        <span class="barter" @click="handleImgBarter">换一张</span>
      </div>
    </div>
    <section class="tip-text">
      <p>温馨提示：未注册过的账号，登录时将自动注册</p>
      <p>注册过的用户可凭账号密码登录</p>
    </section>
    <section class="login-button" @click="handleLoginBtn">登录</section>
    <section class="reset">
      <span @click="handleSkipForget">
        重置密码?
      </span>
    </section>
  </section>
</template>

<script>
export default {
  data() {
    return {
      isMove: false,
      accountNumber: "", //保存账号
      password: "", //保存密码
      verificationCode: "", //保存验证码
    };
  },
  props: {
    captchaAddress: {
      type: String,
      default: "",
    },
  },
  activated() {
    this.$refs.accountNumber.value = "";
    this.$refs.inputPassword.value = "";
    this.$refs.verificationCode.value = "";
  },
  methods: {
    handleMoveCircle() {
      this.isMove = !this.isMove;
      const inputPassword = this.$refs.inputPassword;
      this.isMove
        ? inputPassword.setAttribute("type", "text")
        : inputPassword.setAttribute("type", "password");
    },
    handleImgBarter() {
      this.$emit("handleImgBarter");
    },
    handleLoginBtn() {
      let tipsText = "";
      if (
        (!this.accountNumber && !this.password && !this.verificationCode) ||
        !this.accountNumber
      ) {
        tipsText = "请输入手机号/邮箱/用户名";
      } else if (this.accountNumber && !this.password) {
        tipsText = "请输入密码";
      } else if (
        this.accountNumber &&
        this.password &&
        !this.verificationCode
      ) {
        tipsText = "请输入验证码";
      } else {
        this.$emit(
          "handleVerificationCode",
          this.accountNumber,
          this.password,
          this.verificationCode
        );
        return false;
      }

      this.$toast.handleTipsText(tipsText);
    },
    handleAccountNumber(e) {
      this.accountNumber = e.target.value;
    },
    handlePassword(e) {
      this.password = e.target.value;
    },
    handleVerificationCode(e) {
      this.verificationCode = e.target.value;
    },
    handleSkipForget() {
      this.$router.push('/forget')
    }
  },
};
</script>
<style lang="less" scoped>
.login-main {
  margin-top: 10px;

  & > div {
    padding: 15px;
    border-bottom: 1px solid #f5f5f5;
    background-color: #fff;
    input {
      border: none;
    }
  }
  .password {
    display: flex;
    justify-content: space-between;
    .switch {
      display: flex;
      align-items: center;
      position: relative;
      margin-right: 10px;
      .circle {
        position: absolute;
        left: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #f1f1f1;
        transition: all 0.3s ease;
      }
      .frame {
        padding: 0 15px;
        line-height: 18px;
        border-radius: 20px;
        background-color: #cccccc;
        font-size: 12px;
        color: #fff;
      }
      .move {
        transform: translateX(30px);
      }
      .frame-active {
        background-color: #4cd964;
        color: #fff;
      }
    }
  }
  .verification-code {
    display: flex;
    justify-content: space-between;
    position: relative;
    img {
      position: absolute;
      top: 50%;
      right: 80px;
      transform: translateY(-50%);
    }
    .tips {
      position: absolute;
      top: 50%;
      right: 20px;
      transform: translateY(-50%);
      font-size: 12px;
      span {
        display: block;
      }
      .barter {
        margin-top: 5px;
        color: #9395e9;
      }
    }
  }
  .tip-text {
    padding: 10px;
    font-size: 12px;
    color: #ff0000;
    p {
      padding-top: 10px;
    }
  }
  .login-button {
    text-align: center;
    padding: 15px 0;
    margin: 0 10px;
    border-radius: 5px;
    background-color: #4cd964;
    color: #fff;
  }
  .reset {
    padding: 20px 10px;
    text-align: right;
    font-size: 12px;
    color: #3b95e9;
  }
}
</style>
